<template>
  <div>
    <h1 class="juzhong">视频审核界面</h1>
    <div class="header" style="margin:0 20px ">
      <el-page-header @back="goBack" content="视频详情">
      </el-page-header>
      <el-divider></el-divider>
    </div>
    <div class="juzhong">
      <div class="video">
        <div class="video-content">
          <h2>
            {{ videoData.resource_name }}
          </h2>
          <video controls width="640" height="360" :src="videoData.resource_url">
          </video>
          <br>
          <div>创建时间：{{ videoData.update_time }}</div>
        </div>
        <div class="is-pass">
          <h2>审核</h2>
          <el-radio-group v-model="videoData.ispass">
            <el-radio :label="1" size="large">通过</el-radio>
            <el-radio :label="2" size="large">不通过</el-radio>
          </el-radio-group>
          <br>
          <el-input class="unpass_reason"
                    v-if="videoData.ispass==2"
                    type="textarea"
                    style="width: 400px"
                    placeholder="请写出不通过的理由"
                    v-model="videoData.unpass_reason"
                    :rows="8"
                    clearable>
          </el-input>
          <br>
          <div>上次审核时间：{{ videoData.pass_time }}</div>
          <br>
          <el-button type="primary" @click="handlePass">提交</el-button>
        </div>
      </div>
    </div>
  </div>


</template>


<script>
import {fetchVideoById, UpdateVideoByvideoId} from "@/api/video";
import {Message} from "element-ui";

export default {
  name: 'videoDetail',
  data() {
    return {
      videoData: {
        resource_id: this.$route.params.reId,
        video_id: null,
        resource_name: '测试视频',
        ispass: 1, // 默认选择通过
        unpass_reason: "",
        pass_time: null,
        resource_url: 'http://113.45.144.121:2024/64624f97-6ee8-4a5e-8d89-3b6b864f914d.mp4'
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push('/resource');
    },
    async fetchVideo() {
      const rep = await fetchVideoById(this.videoData.resource_id)
      this.videoData = rep
    },
    async updateVideo() {
      try {
        await UpdateVideoByvideoId(this.videoData)
        Message.success("审核成功！")
      } catch (e) {
        console.log(e)
        Message.error("审核失败！")
      }
    },
    handlePass() {
      this.updateVideo()
    }
  },
  mounted() {
    this.fetchVideo()
  }
}
</script>

<style scoped lang="scss">
.video {
  display: flex;
  width: 90vw;
  align-items: center;
  justify-content: space-around;
  margin: 30px;
  padding: 20px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.video-content, .is-pass {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 20px;
  border-radius: 10px;
  background: rgba(167, 223, 255, 0.25);
}
</style>
